<template>
  <div class="header-bar">
    <span class="header-addr iconfont icon-locationfill"></span>
    <span class="current-city">{{ city }}</span>
    <router-link class="change-city" to="/changeCity">切换城市</router-link>
    <div class="near-city">
      <span class="bracket">[</span>
      <router-link to="/cityGuess" class="city-guess" v-for="(item, index) in recommendCitys" :key="index">{{ item }}
      </router-link>
      <span class="bracket">]</span>
    </div>
    <div class="user-entry">
      <router-link class="user-login" to="/login">立即登录</router-link>
      <router-link class="user-register" to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        city: '南京',
        recommendCitys: ['句容', '仪征', '马鞍山']
      };
    }
  };
</script>

<style lang="stylus" rel="stylussheet/stylus">
  .header-bar
    height 40px
    line-height 40px
    color #666666
    font-size 0
    .header-addr
      font-size 12px
      color #666
    .current-city
      font-size 0.75rem
      color #666666
    .change-city
      border 1px solid #E5E5E5
      background #f4f4f4
      border-radius 2px
      margin 0 4px
      padding 0 2px
      font-size 12px
      color #666666
    .near-city
      display inline-block
      font-size 0
      color #999999
      .bracket
        font-size 12px
      .city-guess
        font-size 12px
        margin 0 4px
    .user-entry
      display inline-block
      margin-left 15px
      .user-login
        font-size 12px
        color #FE8C00
        margin-left 12px
      .user-register
        margin-left 12px
        font-size 12px
        color #666666
        &:hover
          color #FE8C00
</style>
